<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query">
                        <el-button slot="append" icon="el-icon-search" @click="getOrdersList"></el-button>
                    </el-input>
                </el-col>
            </el-row>

            <el-table
                    border
                    stripe
                    :data="ordersList"
                    :header-cell-style="{textAlign: 'center'}"
                    :cell-style="{ textAlign: 'center' }"
            >
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="order_number" label="订单编号"></el-table-column>
                <el-table-column prop="order_price" label="订单价格"></el-table-column>
                <el-table-column label="是否付款">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.order_pay === '0' ">未付款</el-tag>
                        <el-tag type="success" v-else>已付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货"></el-table-column>
                <el-table-column label="下单时间">
                    <template slot-scope="scope">
                        {{scope.row.create_time | datetimeFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit"
                                   @click="showEditDialog(scope.row.order_id)"></el-button>
                        <el-button type="success" icon="el-icon-location"
                                   @click="showExpressDialogVisible(scope.row.order_id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[1, 2, 3, 4, 5]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
            <el-dialog
                    title="修改订单"
                    :visible.sync="editDialogVisible"
                    width="50%"
            >
                <el-form :model="editForm" ref="editFormRef" :rules="editFormRules">
                    <el-form-item label="是否发货">
                        <el-switch
                                v-model="editForm.is_send"
                                active-color="#13ce66"
                                active-value="是"
                                inactive-value="否">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="支付方式">
                        <el-select v-model="editForm.order_pay" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单价格" prop="order_price">
                        <el-input v-model="editForm.order_price"></el-input>
                    </el-form-item>
                    <el-form-item label="订单编号" prop="order_number">
                        <el-input v-model="editForm.order_number"></el-input>
                    </el-form-item>


                </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="edit('editFormRef')">确 定</el-button>
  </span>
            </el-dialog>
            <el-dialog
                    title="物流信息"
                    :visible.sync="expressDialogVisible"
                    width="50%"
                    top="0px"
            >
                <el-timeline>
                    <el-timeline-item
                            v-for="(activity, index) in activities"
                            :key="index"
                            :timestamp="activity.time">
                        {{activity.context}}
                    </el-timeline-item>
                </el-timeline>
                <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="expressDialogVisible = false">确 定</el-button>
  </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
  export default {
    name: "Orders",
    data() {
      return {
        queryInfo: {
          query: '',
          pageSize: 5,
          pageNum: 1
        },
        ordersList: [],
        total: 0,
        editForm: {},
        editDialogVisible: false,
        editFormRules: {
          order_price: [
            {required: true, message: '请输入订单价格', trigger: 'blur'}
          ],
          order_number: [
            {required: true, message: '请输入订单数量', trigger: 'blur'}
          ]
        },
        options: [
          {
            value: '0',
            label: '未支付'
          },
          {
            value: '1',
            label: '支付宝'
          },
          {
            value: '2',
            label: '微信'
          },
          {
            value: '3',
            label: '银行卡'
          },
        ],
        expressDialogVisible: false,
        activities: [],
      }
    },
    created() {
      this.getOrdersList();
    },
    methods: {
      async getOrdersList() {
        const {data: res} = await this.$http({
          url: 'orders',
          method: 'get',
          params: this.queryInfo
        });
        if (res.meta.status === 403) return this.$message.error(res.meta.msg);
        if (res.meta.status !== 200) return this.$message.error('获取订单列表失败');
        this.ordersList = res.data.orders;
        this.total = res.data.total;
      },
      handleSizeChange(newSize) {
        this.queryInfo.pageSize = newSize;
        this.getOrdersList();
      },
      handleCurrentChange(newPage) {
        this.queryInfo.pageNum = newPage;
        this.getOrdersList();
      },
      async showEditDialog(id) {
        const {data: res} = await this.$http({
          url: 'orders/' + id,
          method: 'get'
        });
        if (res.meta.status === 403) return this.$message.error(res.meta.msg);
        if (res.meta.status !== 200) return this.$message.error('获取订单详情失败');
        this.editDialogVisible = true;
        this.editForm = res.data;
      },
      edit(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (!valid) return this.$message.error('表单不合法');
          const {data: res} = await this.$http({
            url: 'orders/' + this.editForm.order_id,
            method: 'put',
            data: this.editForm,
          });
          if (res.meta.status === 403) return this.$message.error(res.meta.msg);
          if (res.meta.status !== 200) return this.$message.error('修改失败');
          this.editDialogVisible = false;
          this.$message.success('修改成功');
          this.getOrdersList();
        });
      },
      async showExpressDialogVisible(id) {
        const {data: res} = await this.$http({
          url: 'express/' + 1,
          method: 'get'
        });
        if (res.meta.status === 403) return this.$message.error(res.meta.msg);
        if (res.meta.status !== 200) return this.$message.error('获取物流信息失败');
        this.activities = res.data;
        this.expressDialogVisible = true;

      }


    }
  }
</script>

<style scoped>
    .el-breadcrumb {
        margin-bottom: 20px;
    }

    .el-table {
        margin: 20px 0;
    }

</style>